<template>
  <t-dialog :visible="visible" attach="#app" header="添加班级" :confirm-btn="{ content: '添加' }" @confirm="submit" @close="closeDialog">
    <t-form :data="ruleForm" ref="form" :rules="rules">
      <t-form-item label="班级名称" name="classname">
        <t-input v-model="ruleForm.classname" />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {addClass} from "../api/Class";
import {MessagePlugin} from "tdesign-vue-next";
const visible = ref<boolean>(false);
interface ruleFormType {
  classname: string;
}
// form表单
const ruleForm = ref<ruleFormType>({
  classname: '',
});
// emit
const emit = defineEmits(['callback']);
// 表单属性
const form = ref();
// 校验规则
const rules = ref({
  classname: [
    { required: true, message: '请输入班级名称' },
  ]
});
// 打开弹框事件
const open = () => {
  visible.value = true;
}
// 提交表单
const submit = async () => {
  const result = await addClass(ruleForm.value.classname);
  if (result) {
    emit('callback');
    MessagePlugin.success(result.message);
    form.value.reset();
    visible.value = false;
  }
}
// 关闭弹框事件
const closeDialog = () => {
  form.value.reset();
  visible.value = false;
  emit('callback');
}

defineExpose({open})
</script>
<style lang="less">

</style>
